<template>
	<div class="bg-white px-3" style="margin: -20px;margin-top: -1rem;margin-bottom: 0!important;">
		
		<el-tabs v-model="tabIndex" @tab-click="getList">
		    <el-tab-pane :label="tab.name" :key="tabI"
			v-for="(tab,tabI) in tabbars"></el-tab-pane>
		</el-tabs>
		
		
		<button-search ref="buttonSearch"
		placeholder="要搜索的商品名称" 
		@search="searchEvent">
		<!-- 左边 -->
			<template #left>
				<router-link :to="{name:'shop_goods_create'}" class="mr-2">
				<el-button type="success" 
				size="mini">发布商品</el-button>
				</router-link>
				<el-button type="warning"
				size="mini" v-if="tab === 'delete'" @click="doEvent('restore')">恢复商品</el-button>
				<el-button type="danger"
				size="mini" v-if="tab === 'delete'" @click="doEvent('destroy')">彻底删除</el-button>
				<el-button type="danger" 
				size="mini" v-if="tab != 'delete'" @click="deleteAll">批量删除</el-button>
				<el-button size="mini" v-if="tab === 'all' || tab === 'off'" @click="changeStatus(1)">上架</el-button>
				<el-button size="mini" v-if="tab === 'all' || tab === 'saling'" @click="changeStatus(0)">下架</el-button>
			</template>
			<!-- 高级搜索表单 -->
			<template #form>
				<el-form inline ref="form" :model="form"
				label-width="80px">
					<el-form-item label="商品名称" class="mb-0">
						<el-input v-model="form.title" 
						placeholder="商品名称"
						size="mini"></el-input>
					</el-form-item>
					<el-form-item label="商品分类" class="mb-0">
						<el-select v-model="form.category_id" placeholder="请选择商品分类"
						size="mini">
						    <el-option
						      v-for="item in cateOptions"
						      :key="item.id"
						      :label="item | tree"
						      :value="item.id">
						    </el-option>
						 </el-select>
					</el-form-item>
					<el-form-item class="mb-0">
						<el-button type="info" size="mini"
						@click="searchEvent">
							搜索</el-button>
						<el-button size="mini"
						@click="clearSearch">清空筛选条件</el-button>
					</el-form-item>
				</el-form>
			</template>
		</button-search>
		
		<!-- 商品列表 -->
		<el-table border class="mt-3"
		  :data="tableData"
		  style="width: 100%"
		   @selection-change="handleSelectionChange">
		  <el-table-column
			type="selection"
			width="45"
			align="center">
		  </el-table-column>
		  
		  <el-table-column
			label="商品"
			width="300">
			<template slot-scope="scope">
				<div class="media">
				  <img class="mr-3" style="width: 60px;height: 60px;" :src="scope.row.cover">
				  <div class="media-body">
				    <p class="mt-0">{{scope.row.title}}</p>
				    <p class="mb-0">分类：{{scope.row.category.name}}</p>
				    <p class="mb-0">时间：{{scope.row.create_time}}</p>
				  </div>
				</div>
			</template>
		  </el-table-column>
		  <el-table-column
		   align="center"
			prop="sale_count"
			width="70"
			label="实际销量">
		  </el-table-column>
		  <el-table-column
			prop="status"
			align="center"
			label="商品状态"
			width="60">
			<template slot-scope="scope">
				<span class="badge" :class="scope.row.status ? 'badge-success' : 'badge-danger'">{{scope.row.status ? '上架' : '仓库'}}</span>
			</template>
		  </el-table-column>
		  <el-table-column
			prop="status"
			align="center"
			width="120"
			label="审核状态">
			<template slot-scope="scope">
				<div class="d-flex flex-column" v-if="!scope.row.ischeck">
					<el-button
					type="success" size="mini"
					@click="checkGoods(scope.row,1)"
					plain>审核通过
					</el-button>
					
					<el-button class="ml-0 mt-2"
					type="danger" size="mini"
					@click="checkGoods(scope.row,2)"
					plain>审核拒绝
					</el-button>
				</div>
				<span v-else>{{scope.row.ischeck === 1? '通过' : '拒绝'}}</span>
			</template>
		  </el-table-column>
		  <el-table-column
			prop="stock"
			align="center"
			width="90"
			label="总库存">
		  </el-table-column>
			<el-table-column
			prop="pprice"
			align="center"
			label=" 价格(元)"
			width="120"
			>
			<template slot-scope="scope">
				<span class="text-danger">￥{{scope.row.min_price}}</span>
				<span>/</span>
				<span class="text-muted">￥{{scope.row.min_oprice}}</span>
			</template>
		  </el-table-column>
		  <el-table-column
			align="center"
			label="操作">
			<template slot-scope="scope">
				<el-button type="text" size="mini" @click="navigate('shop_goods_create',scope.row.id)">基础设置</el-button>
				<el-button type="text" size="mini" @click="navigate('shop_goods_sku',scope.row.id)" :class="(scope.row.sku_type == 0 && !scope.row.sku_value) || (scope.row.sku_type == 1 && !scope.row.goods_skus.length) ? 'text-danger' : ''">商品规格</el-button>
				<el-button type="text" size="mini" @click="navigate('shop_goods_attr',scope.row.id)" :class="scope.row.goods_attrs.length == 0 ? 'text-danger' : ''">商品属性</el-button>
				<el-button type="text" size="mini" @click="navigate('shop_goods_banner',scope.row.id)" :class="scope.row.goods_banner.length == 0 ? 'text-danger' : ''">媒体设置</el-button>
				<el-button type="text" size="mini" @click="navigate('shop_goods_content',scope.row.id)" :class="!scope.row.content ? 'text-danger' : ''">商品详情</el-button>
				<el-button type="text" size="mini" >折扣设置</el-button>
				<el-button type="text" size="mini" @click="deleteItem(scope.row)">删除商品</el-button>
			</template>
		  </el-table-column>
		</el-table>
		<div style="height: 60px;"></div>
		<el-footer class="border-top d-flex align-items-center px-0 position-fixed bg-white" style="bottom: 0;left: 200px;right: 0;z-index: 100;">
		  <div style="flex: 1;" class="px-2">
			  <el-pagination
			    :current-page="page.current"
			    :page-sizes="page.sizes"
			    :page-size="page.size"
			    layout="total, sizes, prev, pager, next, jumper"
			    :total="page.total"
			    @size-change="handleSizeChange"
			    @current-change="handleCurrentChange">
			  </el-pagination>
		  </div>
		</el-footer>
		
	</div>
</template>

<script>
	import buttonSearch from "@/components/common/button-search.vue"
	import common from '@/common/mixins/common.js';
	export default {
		mixins:[common],
		inject:['layout'],
		components: {
			buttonSearch
		},
		data() {
			return {
				preUrl:"goods",
				
				tabIndex: 0,
				tabbars:[
					{ name:"全部",key:"all"},
					{ name:"审核中",key:"checking"},
					{ name:"出售中",key:"saling"},
					{ name:"已下架",key:"off"},
					{ name:"库存预警" ,key:"min_stock"},
					{ name:"回收站" ,key:"delete"},
				],
				form:{
					title:"",
					category_id:""
				},
				tableData: [],
				cateOptions:[]
			}
		},
		filters: {
			tree(item) {
				if (item.level == 0) {
					return item.name
				}
				let str = ''
				for (let i = 0; i < item.level; i++) {
					str += i == 0 ? '|--' : '--'
				}
				return str + ' ' +item.name;
			}
		},
		computed: {
			tab() {
				return this.tabbars[this.tabIndex].key 
			},
			params(){
				let str = ''
				for (let key in this.form) {
					let val = this.form[key]
					if(val){
						str += `&${key}=${this.form[key]}`
					}
				}
				return str
			}
		},
		created() {
			
		},
		methods: {
			navigate(name,id){
				this.$router.push({
					name,
					params:{ id }
				})
			},
			// 获取请求列表分页url
			getListUrl(){
				return `/admin/${this.preUrl}/${this.page.current}?limit=${this.page.size}&tab=${this.tab}${this.params}`
			},
			getListResult(e){
				console.log(e);
				this.tableData = e.list
				this.cateOptions = e.cates
			},
			// 上下架
			changeStatus(item){
				item.status = item.status === 1 ?  0 : 1
			},
			// 清空筛选条件
			clearSearch(){
				this.form = {
					title:"",
					category_id:""
				}
			},
			// 搜索事件
			searchEvent(e = false){
				// 简单搜索
				if (typeof e === 'string') {
					this.form.title = e
				}
				// 高级搜索
				this.getList()
			},
			doEvent(key){
				if (this.ids.length === 0) {
					return this.$message({
						type:"error",
						message:"请选择要操作的商品"
					})
				}
				this.showLoading()
				this.axios.post('/admin/goods/'+key,{
					ids:this.ids
				},{
					token:true
				}).then(res=>{
					this.$message({
						type:"success",
						message:"操作成功"
					})
					this.getList()
					this.hideLoading()
				}).catch(err=>{
					this.hideLoading()
				})
			},
			// 上下架
			changeStatus(status){
				if (this.ids.length === 0) {
					return this.$message({
						type:"error",
						message:"请选择要操作的商品"
					})
				}
				this.showLoading()
				this.axios.post('/admin/goods/changestatus',{
					ids:this.ids,
					status
				},{ token:true }).then(res=>{
					this.$message({
						type:"success",
						message:"操作成功"
					})
					this.getList()
					this.hideLoading()
				}).catch(err=>{
					this.hideLoading()
				})
			},
			checkGoods(item,ischeck){
				this.layout.showLoading()
				this.axios.post('/admin/goods/'+item.id+'/check',{
					ischeck
				},{ token:true }).then(res=>{
					this.getList()
					this.$message({
						type:"success",
						message:"操作成功"
					})
					this.layout.hideLoading()
				}).catch(err=>{
					this.layout.hideLoading()
				})
			}
		},
	}
</script>

<style>
</style>
